import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'app-sign-books',
  templateUrl: './sign-books.component.html',
  styleUrl: './sign-books.component.css'
})
export class SignBooksComponent implements AfterViewInit {
  @ViewChild('signList') signList!: ElementRef;
  @ViewChild('signContent') signContent!: ElementRef;

  bookOpened = false;
  imgOpened = false;
  signContentOpened = false;
  signListStoped = false;
  signListLeft = 0;
  msgList: any[] = [];

  ngAfterViewInit(): void {
    this.transition();
  }

  transitionend() {
    this.signListStoped = true;
    if (this.signList.nativeElement.clientWidth <= this.signContent.nativeElement.clientWidth) {
      setTimeout(() => {
        this.signListStoped = false
      }, 3000)
    }
  }

  transition() {
    if (!this.signContent.nativeElement.clientWidth || this.signList.nativeElement.clientWidth <= this.signContent.nativeElement.clientWidth) {
      this.signListLeft = 0;
    } else {
      this.signListLeft = 140 * this.msgList.length - this.signContent.nativeElement.clientWidth - 20;
    }

    setTimeout(() => {
      this.bookOpened = true;
      this.imgOpened = true;
    }, 1000)

    setTimeout(() => {
      this.signContentOpened = true;
    }, 2000)

    setTimeout(() => {
      if (!this.signContent.nativeElement.clientWidth || this.signList.nativeElement.clientWidth <= this.signContent.nativeElement.clientWidth) {

      } else {
        this.signListLeft = -140 * this.msgList.length + this.signContent.nativeElement.clientWidth - 20;
      }
    }, 5000)
  }

}
